<template lang="html">
    <div class="alet_container">
        <section class="tip_text_container">
            <div class="quick_remark">
                <ul class="remark_arr_list_ul">
                    <li class="remark_arr_list_li" v-for="(item,index) in tasteList" :key="index">
                        <span class="remark_item_li first last "  :class="{choosed:item.choosed}" @click="confirmTaste(foods.id,item)">{{item.name}}</span>
                    </li>
                </ul>
            </div>
            <div class="confrim">关闭</div>
        </section>
    </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
@import '../../style/mixin.scss';
.alet_container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background-color: rgba(0, 0, 0, .1);
}

.tip_text_container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -45%;
    margin-left: -45%;
    width: 90%;
    animation: tipMove .4s;
    background-color: rgba(255, 255, 255, 1);
    border: 1px;
    padding-top: .6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px;
    border-radius: 0.25rem;
    .confrim {
        @include sc(.8rem, #fff);
        font-weight: bold;
        margin-top: .8rem;
        background-color: #4cd964;
        width: 100%;
        text-align: center;
        line-height: 1.8rem;
        border: 1px;
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
    }
}
</style>
